import React, { useEffect, useState } from 'react'
import {
  PageHeader, Button, Modal, Form, Input, message,
  Row,
  Col,
  Upload,
  Select,
  Avatar,
  Image,
  Tag,
  Tabs
} from 'antd';
import { UserOutlined, } from '@ant-design/icons';
import PatientHeadDetails from "./components/PatientHeadDetails"
const { TextArea } = Input;

export default function PatientInformation() {

  const [form] = Form.useForm();

  const onFinish = () => {
    message.success('Submit success!');
  };

  const onFinishFailed = () => {
    message.error('Submit failed!');
  };


  return (
    <div className='Patient-information'>
      <PatientHeadDetails />
      <div className='information-content-box' >
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          style={{display:"flex"}}
          onFinishFailed={onFinishFailed}
          // labelCol={{ span: 8 }}
          wrapperCol={{ span: 20 }}
          autoComplete="off"
        >
          <div className='information-content1'>

            <Form.Item
              name="phone"
              label="電話番号"
            // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
            >
              <Input disabled />
            </Form.Item>
            <Form.Item
              name="email"
              label="E-mail"
              rules={[
                {
                  type: 'email',
                  message: 'The input is not valid E-mail!',
                },
                {
                  required: true,
                  message: 'Please input your E-mail!',
                },
              ]}
            >
              <Input disabled />
            </Form.Item>
            <Form.Item
              name="address"
              label="住所"
            // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
            >
              <TextArea
                disabled
                placeholder="Autosize height with minimum and maximum number of lines"
                autoSize={{ minRows: 2, maxRows: 6 }}
              />
            </Form.Item>
            <Form.Item
              name="address"
              label="お届け先情報"
            // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
            >
              <TextArea
                // value={value}
                // onChange={this.onChange}
                disabled
                placeholder="Controlled autosize"
                autoSize={{ minRows: 3, maxRows: 5 }}
              />
            </Form.Item>




          </div>

          <div className='information-content2'>
            <Form.Item
              name="address"
              label="coming soon... "

            // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
            >
              <TextArea
                // value={value}
                // onChange={this.onChange}
                disabled
                placeholder="Controlled autosize"
                autoSize={{ minRows: 3, maxRows: 5 }}
              />
            </Form.Item>
            <div className='content-insurance'>
              <div className='content-insurance-subfield1'>
                <Form.Item
                  name="insuranceCard"
                  label="保険証"
                // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
                >
                  <Image
                    width={200}
                    height={200}
                    src="error"
                    fallback=""
                  />
                </Form.Item>
                <Form.Item
                  name="insuranceUserNumber"
                  label="保険者番号"
                // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="mark"
                  label="記号"
                // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="mark"
                  label="番号"
                // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
                >
                  <Input disabled />
                </Form.Item>
              </div>
              <div className='content-insurance-subfield1'>
                <Form.Item
                  name="hospitalCard"
                  label="医療証等(お持ちの場合)"
                // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
                >
                  <Image
                    width={200}
                    height={200}
                    src="error"
                    fallback=""
                  />
                </Form.Item>
                <Form.Item
                  name="accountabilityUserNumber"
                  label="负担者番号"
                // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
                >
                  <Input disabled />
                </Form.Item>
                <Form.Item
                  name="mark"
                  label="受給者番号"
                // rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
                >
                  <Input disabled />
                </Form.Item>
              </div>
            </div>
            <div className='information-btn'>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </div>

          </div>

        </Form>
      </div>

    </div>
  )
}
